<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="./css/index2.css"/>
    <link rel="stylesheet" type="text/css" href="./css/styles.css"/>
    <link href="./css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/bootstrap.min.css" />
    <!--时间css end-->
    <link href="./css/animate.min.css" rel="stylesheet">
    <link href="./css/prettify-1.0.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <!--时间js start-->
    <script src="./js/moment-with-locales.js"></script>
    <script src="./js/bootstrap-datetimepicker.js"></script>

    <script type="text/javascript" src="./js/Popt.js"></script>
    <script type="text/javascript" src="./js/city.json.js"></script>
    <script type="text/javascript" src="./js/citySet.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/styless.css" />
    <script type="text/javascript" src="./js/jquery.SuperSlide.2.1.3.js"></script>
    <link rel="stylesheet" href="./css/swiper.min.css">


    <script src="./js/swiper.min.js"></script>

    <link rel="stylesheet" href="./css/stylesss.css">
    <style type="text/css">
        ._citys { background-color: #101010; width: 450px; display: inline-block;  padding: 5px; position: relative; }
        ._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
        ._citys0 { color: #DDDDDD; width: 95%; height: 34px; line-height: 34px; display: inline-block;  padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
        ._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
        ._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
        ._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
        ._citys1 a:hover { color: #fff; background-color: #05920a; }
        .AreaS { background-color: #05920a !important; color: #fff !important; }
    </style>
</head>
<body>
<div class="titles">
    <p>张家口途乐客车租赁</p>
    <div class="title1">
        <a href="../driver/login.html">车主登录</a>
        <a href="login.html">用户登录</a>
    </div>
</div>


<div id="slideBox" class="slideBox" style="width: 100%;">
    <div class="hd">
        <ul class="bannerstatename">



        </ul>
    </div>
    <div class="bd" style="width: 100%;">
        <ul class="bannerstate">



        </ul>
    </div>



</div>



<div class="Modeltitle">
    <p>车型推荐</p>
</div>

<div class="Model">




</div>




<div class="Modeltitle">
    <p>司机推荐</p>
</div>

<div class="driver">



</div>



<div class="main">
 <div class="title">实时动态</div><div class="w-imgText" id="imgText">
<div class="swiperBox">
    <ul class="swiper-wrapper">


    </ul></div>
    <div class="igt_page"></div>
    </div><div class="igt_page_text"><ul class="clearfix"></ul></div>

    <script type="text/javascript">
        $(function(){

        })
    </script>
</div>



<div class="dibu">

</div>



<div class="w3ls-contact">

    <!-- form starts here -->
    <form action="#" method="post">
        <div class="agile-field-txt">
            <label>
                出发 :</label>
            <div class="mr_agilemain">
                <div class="left-wthree">
                    <input type="text" name="name" placeholder="请选择" autocomplete="off" readonly="true" id="city" required="">
                    <label class="bot_w3">
                        出发地点</label>
                </div>
                <div class="left-wthree">
                    <div class='input-group date' >
                        <input type="text" name="name" id='datetimepicker3' placeholder=" " required="">
                    </div>
                    <label class="bot_w3">
                        出发时间</label>
                </div>
            </div>
        </div>


        <div class="agile-field-txt">
            <label>
                返程 :</label>
            <div class="mr_agilemain">
                <div class="left-wthree">
                    <input type="text" name="namee" placeholder="请选择" autocomplete="off" readonly="true" id="citys" required="">
                    <label class="bot_w3">
                        返程地点</label>
                </div>
                <div class="left-wthree">
                    <div class='input-group date' >
                        <input type="text" name="timee" id='datetimepickera' placeholder=" " required="">
                    </div>
                    <label class="bot_w3">
                        返程时间</label>
                </div>
            </div>
        </div>


        <div class="agile-field-txt">
            <label>
                关于 :</label>
            <div class="mr_agilemain">
                <div class="left-wthree">
                    <input type="text" name="name" placeholder=" " required="">
                    <label class="bot_w3">
                        用车人数</label>
                </div>
                <div class="left-wthree">
                    <input type="text" name="name" placeholder=" " required="">
                    <label class="bot_w3">
                        联系电话</label>
                </div>
            </div>
        </div>



        <div class="agile-field-txt">
            <label>
                备注</label>
            <textarea name="Comments" placeholder="请输入详细内容" required=""></textarea>
        </div>
        <div style="text-align: center;">
            <input type="submit" value="发布">
        </div>

    </form>
</div>


<script type="text/javascript">

</script>
<script type="text/javascript">
    $(function () {
        alert("温馨提示，只有注册完才能下单");
        $('#datetimepicker3').datetimepicker({
            locale: 'zh-cn',
            viewMode: 'days',
            format: 'YYYY-MM-DD'
        });
    });
    $(function () {
        $('#datetimepickera').datetimepicker({
            locale: 'zh-cn',
            viewMode: 'days',
            format: 'YYYY-MM-DD'
        });
    });
</script>
<script type="text/javascript">

    $("#city").click(function (e) {
        SelCity(this,e);
    });
    $("s").click(function (e) {
        SelCity(document.getElementById("city"),e);
    });
</script>

<script type="text/javascript">
    $("#citys").click(function (e) {
        SelCity(this,e);
    });
    $("s").click(function (e) {
        SelCity(document.getElementById("citys"),e);
    });
</script>

<script type="text/javascript">

    $(function(){


        //banner图片渲染
        $.ajax({
            type:"POST",
            url:"/bannerliststate",
            datatype:'json',
            success:function(data){
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;


                }
                var  lists = data.data;
                console.log(data);
                var html = "";

                for (var i = 0; i < 3; i++){

                    html += '<li style="background-color: rgb(183, 159, 255); width: 100%;"><img style="width: 100%;"  src="/imgshows?picName=' + lists[i].banner_image + '" /></li>';


                    $('.bannerstate').html(html);
                    // html += '<li><span>' + lists[i].banner_name + '</span><div class="dot"><div class="liner"></div></div></li>';
                    // $('.bannerstatename').html(html);
                }
                jQuery(".slideBox").slide({
                    mainCell: ".bd ul",
                    effect: "fold",
                    trigger: "click",
                    autoPlay: true,
                    mouseOverStop: false,
                    startFun:function(i,c){
                        $('.bd ul li').removeClass('active').eq(i).addClass('active');
                    }
                });


            }
        });

        //banner名字渲染
        $.ajax({
            type:"POST",
            url:"/bannerliststate",
            datatype:'json',
            success:function(data){
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;


                }
                var  lists = data.data;
                console.log(data);
                var html = "";

                for (var i = 0; i < 3; i++){


                     html += '<li><span>' + lists[i].banner_name + '</span><div class="dot"><div class="liner"></div></div></li>';
                     $('.bannerstatename').html(html);
                }
                jQuery(".slideBox").slide({
                    mainCell: ".bd ul",
                    effect: "fold",
                    trigger: "click",
                    autoPlay: true,
                    mouseOverStop: false,
                    startFun:function(i,c){
                        $('.bd ul li').removeClass('active').eq(i).addClass('active');
                    }
                });


            }
        });

        //客车渲染
        $.ajax({
            type:"POST",
            url:"/busstateall",
            datatype:'json',
            success:function(data){
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;


                }
                var  lists = data.data;
                console.log(data);
                var html = "";

                for (var i = 0; i < 8; i++){



                        html += '<figure>';
                        html += '<img src="/imgshows?picName=' + lists[i].bus_photo + '">';
                        html += '<div class="Model1">';
                        html += '<div class="Model2">';
                        html += '<figcaption style="font-size: 17px;">' + lists[i].bus_name + '</figcaption>';
                        html += '<figcaption style="color: #999999;">可乘坐人数：' + lists[i].bus_seat + '</figcaption>';
                        html += ' </div><a style="color: crimson;">￥' + lists[i].bus_price + '/天</a>';
                        html += '</div></figure>';

                    $('.Model').html(html);

                }


            }
        });


         //司机列表
        $.ajax({
            type:"POST",
            url:"/driverStatelist",
            datatype:'json',
            success:function(data){
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;


                }
                var  lists = data.data;
                console.log(data);
                var html = "";

                for (var i = 0; i < 4; i++){

                    html += '<figure>';
                    html += '<img src="/imgshows?picName=' + lists[i].driver_personal + '">';
                    html += '<figcaption style="font-size: 17px;">' + lists[i].driver_name + '</figcaption>';
                    html += '<figcaption style="color: #999999;">' + lists[i].driver_remarks + '</figcaption>';

                    html += '</figure>';

                    $('.driver').html(html);

                }


            }
        });

        //新闻渲染
        $.ajax({
            type:"POST",
            url:"/journalismstate",
            datatype:'json',
            success:function(data){
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;


                }
                var  lists = data.data;
                console.log(data);
                var html = "";

                for (var i = 0; i < 3; i++){
                    // html += '<div class="title">实时动态</div><div class="w-imgText" id="imgText">';
                    // html += '<div class="swiperBox">';
                    // html += '<ul class="swiper-wrapper">';
                    html += '<li class="swiper-slide" data-title="' + lists[i].journalism_title + '">';
                    html += '<div class="item"><div class="imTB"> <div class="img">';
                    html += '<img src="/imgshows?picName=' + lists[i].journalism_content1 + '"/></div>';
                    html += '<div class="textB"><div class="bg_x"></div><div class="text_x">';
                    html += '<div class="tt_h">' + lists[i].journalism_title + '</div>';
                    html += '<p>' + lists[i].journalism_content2 + '</p>';
                    html += '<div class="btn">查看更多</div></div></div></div><a href="#"></a></div></li>';
                    // html += '</ul></div><div class="igt_page"></div>';
                    // html += '</div><div class="igt_page_text"><ul class="clearfix"></ul></div>';
                    $('.swiper-wrapper').html(html);


                }

                var imgTextId=$('#imgText');
                var swiperId=imgTextId.find('.swiperBox');
                var pagediv=imgTextId.find('.igt_page');
                var igtli=imgTextId.find('li');
                var igtliW=100*1.0/igtli.length + '%';
                var titles=[];
                var _html = '';
                igtli.each(function (index) {
                    var title=$(this).attr('data-title');
                    if(index===0){
                        _html += '<li class="igt_li on" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                    }else{
                        _html += '<li class="igt_li" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                    }
                });
                imgTextId.siblings('.igt_page_text').find('ul').append(_html);
                var swiper1 = new Swiper(swiperId, {
                    effect : 'slide',
                    autoplay : {
                        delay:8000,//滚动速度
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: pagediv,
                        type: 'custom',
                        renderCustom: function (swiper, current, total) {
                            return '<span class="on">0' + current + '</span><span>/</span><span>0' + total + '</span>';
                        }
                    },
                    on:{
                        slideChange: function(){
                            var index = this.activeIndex;
                            imgTextId.siblings('.igt_page_text').find('li').eq(index).addClass('on').find('.adore').addClass('bg_main');
                            imgTextId.siblings('.igt_page_text').find('li').eq(index).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                        }
                    }
                })
                imgTextId.siblings('.igt_page_text').on('click','li',function(){
                    if (!$(this).hasClass('on')){
                        var thisI = $(this).index();
                        $(this).addClass('on').find('.adore').addClass('bg_main');
                        $(this).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                        swiper1.slideTo(thisI, 1000, false);
                    }

                });


            }
        });

    })
</script>


</body>
</html>
